<!--
 * @Author: your name
 * @Date: 2021-07-08 12:46:10
 * @LastEditTime: 2021-11-11 14:06:55
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jinfeng_up\src\pages\systemSetting\column.vue
-->
<template>
  <div class="all">
    <el-form label-position="right" label-width="160px">
      <div class="dataRefreshBtn">
        <DataRefresh class="dataStatisticsButton" />
      </div>
      <div class="bottop">
        <p class="titlename"><span>反馈</span></p>
        <el-row :gutter="20">
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-row>
                <el-col :span="1"><span class="blueOne"></span></el-col>
                <el-col :span="23">
                  <el-form-item label="反馈创建时长：">
                    <el-input :disabled="bianji" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入数字" v-model="feedbackList.firstDays"></el-input>
                  </el-form-item>
                </el-col>
              </el-row></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-row>
                <el-col :span="1"><span class="redOne"></span></el-col>
                <el-col :span="23">
                  <el-form-item label="严重反馈创建时长：">
                    <el-input :disabled="bianji" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入数字" v-model="feedbackList.secondDays"></el-input>
                  </el-form-item>
                </el-col>
              </el-row></div
          ></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-row>
                <el-col :span="1"><span class="orangeOne"></span></el-col>
                <el-col :span="23">
                  <el-form-item label="FEMS创建时长：">
                    <el-input :disabled="bianji" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入数字" v-model="femsList.firstDays"></el-input>
                  </el-form-item>
                </el-col>
              </el-row></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-row>
                <el-col :span="1"><span class="redOne"></span></el-col>
                <el-col :span="23">
                  <el-form-item label="严重FEMS创建时长：">
                    <el-input :disabled="bianji" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入数字" v-model="femsList.secondDays"></el-input>
                  </el-form-item>
                </el-col>
              </el-row></div
          ></el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-row>
                <el-col :span="1"><span class="bacOne"></span></el-col>
                <el-col :span="23">
                  <el-form-item label="待处理天数：">
                    <el-input :disabled="bianji" placeholder="请输入数字" v-model="femsList.pendingDays"></el-input>
                  </el-form-item>
                </el-col>
              </el-row></div
          ></el-col>
          <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
        </el-row> -->
        <el-row>
          <el-radio v-model="femsList.workDayTag" :label="true" style="margin-left: 110px" :disabled="bianji"
            >工作日</el-radio
          >
          <el-radio v-model="femsList.workDayTag" :label="false" :disabled="bianji">天数</el-radio>
        </el-row>
      </div>
      <div class="botbot">
        <p class="titlename"><span>任务</span></p>
        <el-row :gutter="20">
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-row>
                <el-col :span="1"><span class="blueOne"></span></el-col>
                <el-col :span="23">
                  <el-form-item label="超过天数：">
                    <el-input :disabled="bianji" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入数字" v-model="taskList.firstDays"></el-input>
                  </el-form-item>
                </el-col>
              </el-row></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-row>
                <el-col :span="1"><span class="orangeOne"></span></el-col>
                <el-col :span="23">
                  <el-form-item label="超过天数：">
                    <el-input :disabled="bianji" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入数字" v-model="taskList.secondDays"></el-input>
                  </el-form-item>
                </el-col>
              </el-row></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-row>
                <el-col :span="1"><span class="redOne"></span></el-col>
                <el-col :span="23">
                  <el-form-item label="超过天数：">
                    <el-input :disabled="bianji" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入数字" v-model="taskList.pendingDays"></el-input>
                  </el-form-item>
                </el-col>
              </el-row></div
          ></el-col>
        </el-row>
        <el-row>
          <el-radio v-model="taskList.workDayTag" :label="true" style="margin-left: 110px" :disabled="bianji"
            >工作日</el-radio
          >
          <el-radio v-model="taskList.workDayTag" :label="false" :disabled="bianji">天数</el-radio>
        </el-row>
      </div>
      <div>
        <div v-if="bianji" class="editorDiv">
          <el-button type="primary" @click="setEditor" class="blueBtn">编辑</el-button>
        </div>
        <div v-else class="confirmDiv">
          <el-button type="primary" @click="toCanale" class="grayBtn">取消</el-button>
          <el-button type="primary" @click="toSave" class="blueBtn">保存</el-button>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import { IOverdueSetContract } from '@/api/setting/service.js'
import DataRefresh from './dataRefresh.vue'
export default {
    name: '',
    components: {
        DataRefresh
    },
    props: {},
    data() {
        return {
            // 判断是否是添加
            isInser: true,
            // 是否可以编辑
            bianji: true,
            // 反馈
            feedbackList: {
                firstDays: null,
                id: null,
                overdueType: null,
                pendingDays: null,
                secondDays: null,
                threeDays: null,
                workDayTag: null
            },
            // FEMS
            femsList: {
                firstDays: null,
                id: null,
                overdueType: null,
                pendingDays: null,
                secondDays: null,
                threeDays: null,
                workDayTag: null
            },
            // 任务
            taskList: {
                firstDays: null,
                id: null,
                overdueType: null,
                pendingDays: null,
                secondDays: null,
                threeDays: null,
                workDayTag: null
            },
            // 超期反馈数据
            dataListOne: {
                firstDays: '',
                pendingDays: '',
                secondDays: '',
                threeDays: '',
                workDayTag: false
            },
            // 超期任务数据
            dataListTwo: {
                firstDays: '',
                pendingDays: '',
                secondDays: '',
                workDayTag: false
            }
        }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
        this.getCategory()
    },
    methods: {
    /**
     * @description: 编辑打开按钮
     */
        setEditor() {
            this.bianji = false
            // console.log(this.bianji)
        },

        /**
     * @description: 编辑保存按钮
     */
        async toSave() {
            this.bianji = true
            this.feedbackList.pendingDays = this.femsList.pendingDays
            this.feedbackList.workDayTag = this.femsList.workDayTag
            const data = []
            data.push(this.feedbackList)
            data.push(this.femsList)
            data.push(this.taskList)
            if (this.isInsert) {
                try {
                    const result = await IOverdueSetContract.IOverdueSetContractInsertAsync(data)
                    if (result.success) {
                        this.$message.success(result.message)
                    } else {
                        this.$message.error(result.message)
                    }
                } catch (err) {
                    this.$message.error('服务器异常')
                }
            } else {
                try {
                    const result = await IOverdueSetContract.IOverdueSetContractUpdateAsync(data)
                    if (result.success) {
                        this.$message.success(result.message)
                    } else {
                        this.$message.error(result.message)
                    }
                } catch (err) {
                    this.$message.error('服务器异常')
                }
            }
        },

        /**
     * @description: 取消编辑按钮
     */
        toCanale() {
            this.bianji = true
        },

        /**
     * @description: 获取所有数据
     */
        async getCategory() {
            try {
                const result = await IOverdueSetContract.IOverdueSetContractGetAllAsync()
                if (result.success) {
                    // console.log(result.data)
                    if (result.data != [] && result.data.length != 0) {
                        // console.log()
                        this.feedbackList = result.data[0]
                        this.femsList = result.data[1]
                        this.taskList = result.data[2]
                        this.isInsert = false
                    } else {
                        this.isInsert = true
                    }
                } else {
                    this.$message.error(result.message)
                }
            } catch (err) {
                this.$message.error('服务器异常')
            }
        }
    }
}
</script>
<style lang="less" scoped>
.all {
  padding: 30px;
  margin: 30px;
  background: #fff;
  border-radius: 5px;
  height: 810px;
}
.titlename {
  border-bottom: 1px solid #dadee0;
  margin-bottom: 30px;
  padding-bottom: 10px;
}
.blueOne {
  width: 25px;
  height: 25px;
  margin-top: 5px;
  margin-left: 10px;
  background: blue;
  border-radius: 50%;
  display: inline-block;
}
.orangeOne {
  width: 25px;
  height: 25px;
  margin-top: 5px;
  margin-left: 10px;
  background: orange;
  border-radius: 50%;
  display: inline-block;
}
.redOne {
  width: 25px;
  height: 25px;
  margin-top: 5px;
  margin-left: 10px;
  background: red;
  border-radius: 50%;
  display: inline-block;
}
.bacOne {
  width: 30px;
  height: 30px;
  margin-top: 5px;
  margin-left: 25px;
  border-radius: 50%;
  display: inline-block;
}
.dataStatisticsButton {
  float: right;
  margin-right: 10px;
}
.dataRefreshBtn {
  width: 100%;
  height: 50px;
}
.editorDiv {
  width: 80px;
  position: relative;
  bottom: 0;
  left: 50%;
}
.blueBtn {
  width: 70px;
  height: 30px;
  background: #eaf2ff;
  border: 1px solid #3579e0;
  border-radius: 5px;
  color: #3579e0;
  line-height: 8px;
}
.grayBtn {
  width: 70px;
  height: 30px;
  background: #ffffff;
  border: 1px solid #dcdde0;
  border-radius: 5px;
  color: #666666;
  line-height: 8px;
}
.confirmDiv {
  width: 160px;
  position: relative;
  bottom: 0;
  left: 48%;
}
</style>
